<template>
  <!-- 
    计算属性: computed
    作用:一个变量的值依赖另外的一些数据计算来的结果
    简单写法:   
    computed:{
      计算属性名(){
        return 值
      }
    }
    完整写法:
    computed:{
      计算属性名:{
        set(参数){
          // set是赋值过程
        },
        get(){
          // get是取值过程
        }
      }
    }

    两种写法的区别 与 data的关系:
    简单写法的属性名对应的是函数体  只能取值 不能影响到data里的数据
    完整写法的属性名对应的是配置对象  可以给计算属性赋值 可以和页面的数据双向绑定
   -->
  <div>
    <h3>computed简单写法</h3>
    <p>{{ num }}</p>
    <hr />
    <h3>computed完整写法</h3>
    <button @click="fn">change</button>
    <div>
      姓: <input type="text" placeholder="姓" v-model="firstName">
      名: <input type="text" placeholder="名" v-model="lastName">
      姓名1: <input type="text" placeholder="姓名1" :value="full">
      姓名2: <input type="text" placeholder="姓名2" v-model="full">
      姓名2: <input type="text" placeholder="姓名3" v-model="full">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
      firstName: 'hello vue',
      lastName: 'react'
    }
  },
  // 定义计算属性
  computed: {
    // 简单写法
    num() {
      return this.a + this.b
    },
    // 完整写法
    full: {
      set(val) {
        console.log('setter');
        console.log(val);
         [this.firstName, this.lastName] = val.split(" ");
      },
      get() {
        console.log('getter');
        return (
          this.firstName +'&'+ this.lastName
        )
      }
    }
  },

  methods: {
    fn() {
      this.full = 'i love vue'
    }
  }
}
</script>

<style>
</style>